<template>

  <!-- 侧边栏 -->
  <section class="notice home-right-item-wrap home-right-item-first com-2-panel J-activityRecommend">
    <img class="w-full notice-bg" src=''/>
    <div class="notice-content">
      <div class="home-right-item-title absolute">
        <h5 class="com-2-panel-title">{{side.title}}</h5>
      </div>
      <div class="home-right-item-post-list com-2-panel-bd">
        <ul class="com-2-side-activities" v-for="(item, id) in side.items" :key="id">
          <li>
            <a :href="item.url"
               class="home-right-item-post-item com-media com-2-side-activity">
              <div class="com-media-body home-right-item-post-title"  v-if="item.tags?.length !== 0">
                <span class="home-right-item-icon-wrap" v-for="(tag, id) in item.tags" :key="id">
                    <img v-if = "tag === 1"
                         style="display: inline"
                         class="home-right-item-icon"
                         src=""
                         alt="火"/>
                    <img v-if = "tag === 2"
                         style="display: inline"
                         class="home-right-item-icon"
                         src=""
                         alt="官方"/>
                    <img v-if = "tag === 3"
                         style="display: inline"
                         class="home-right-item-icon"
                         src=""
                       alt="推荐"/>
                  <span class="com-2-side-activity-title home-right-item-post-title-txt">{{item.name}}</span>
                </span>

                <div class="com-2-side-activity-desc">{{item.title}}</div>
              </div>
              <div class="com-media-object">
                <button type="button"
                        class="s com-2-side-activity-btn c-btn c-btn-hole">
                  <span class="text">立即查看</span>
                </button>
              </div>
            </a>
          </li>
        </ul>
<!--        <header class="com-2-panel-subhd">-->
<!--          <h3 class="com-2-panel-subtitle">星球海报</h3>-->
<!--        </header>-->
<!--        <div class="com-event-panel com-event-panel-l theme2 without-margin">-->
<!--          <div class="com-event-panel-inner">-->
<!--            <div class="com-event-panel-object">-->
<!--              <a :href="side.url">-->
<!--                <img id="img" class="com-event-panel-img"-->
<!--                     alt="星球名称"-->
<!--                     :src="side.img"></a>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>
  </section>
</template>
<script setup lang="ts">

import type { SideBarItem } from '@/http/ResponseTypes/SideBarItemType'

const props = defineProps<{
  side: SideBarItem
}>()

</script>



<style scoped>

#img {
  width: 248px;
  height: auto;
}

</style>
